<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增优惠卷种类信息')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <style>
        .form-radio {
            margin-right: 5px;
            padding: 5px 5px 5px 0;
        }
        .form-radio span{
            display: inline-block;
            margin-left: 2px;
            vertical-align: 2px;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
        <form class="form-horizontal m" id="form-coupon-add">
            <input type="hidden" name="limitCourseId" id="courseIdHidden"/>
            <div class="form-group row" style="margin-top: 30px">
                <label class="col-sm-3 col-form-label is-required text-sm-right">优惠卷名称</label>
                <div class="col-sm-4">
                    <input name="title" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-sm-right">可用次数</label>
                <div class="col-sm-9">
                    <label class="col-form-label mr-2">
                        <input type="radio" checked="checked" value="0" name="useType">
                        <span>单次</span>
                    </label>
                    <label class="col-form-label">
                        <input type="radio" value="1" name="useType">
                        <span>无限</span>
                    </label>
                    <span style="color: red;font-size: 12px;line-height: 34px">*'单次'优惠券使用一次后不能继续使用，'无限'优惠券在有效期内可以被多次使用</span>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label is-required text-sm-right">使用限额</label>
                <div class="col-sm-2">
                    <input id="limitAmount" name="limitAmount" class="form-control" type="number" required>
                </div>
                <div style="color: red;font-size: 12px;line-height: 34px">*订单总金额达到这个数的订单才能使用此折扣优惠券，如300元，则请输入'300'</div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label is-required text-sm-right">优惠金额</label>
                <div class="col-sm-2">
                    <input id="amount" name="amount" class="form-control" type="number" required>
                </div>
                <div style="color: red;font-size: 12px;line-height: 34px">*该优惠券金额，如5元优惠券，则请输入'5'</div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-sm-right">适用范围</label>
                <div class="col-sm-8">
                    <label class="col-form-label mr-2">
                        <input type="radio" checked="checked" value="1" name="range">
                        <span>所有</span>
                    </label>
                    <label class="col-form-label mr-2">
                        <input type="radio" value="2" name="range">
                        <span>指定频道</span>
                    </label>
                    <label class="col-form-label">
                        <input type="radio" value="3" name="range">
                        <span>指定课程</span>
                    </label>
                </div>
            </div>
            <div class="form-group row" id="categoryNameBtn" style="display: none">
                <label class="col-sm-3 col-form-label is-required text-sm-right" style="float: left">&nbsp;</label>
                <div class="col-sm-3">
                    <select id="channelId" class="form-control">
                        <option value="0">频道</option>
                        <option th:each="channel : ${channels}" th:value="${channel.channelId}" th:text="${channel.channelName}">频道</option>
                    </select>
                </div>
            </div>
            <div class="form-group row" id="limitCourse"  style="display: none">
                <label class="col-sm-3 col-form-label text-sm-right">&nbsp;</label>
                <div class="col-sm-6">
                    <button type="button"  onclick="courseAdds()" class="btn btn-xs btn-success"><i class="fa fa-plus"></i> 选择课程</button>&nbsp;
                    <button type="button"  onclick="courseRemove()" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 清空</button>
                    <div style="margin-top: 20px" id="courseList"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-sm-right" id="totalNumTile">生成优惠编码数量</label>
                <div class="col-sm-2">
                    <input id="totalNum" name="totalNum"  class="form-control" type="number" required>
                </div>
                <div id="totalNumText" style="color: red;font-size: 12px;line-height: 34px">*不得大于5000</div>
            </div>
            <div class="form-group row">
                <label class=" col-sm-3 col-form-label text-sm-right font-noraml">有效期限</label>
                <div class="col-sm-4 input-daterange input-group">
                    <input type="text" autocomplete="off" name="startDate" class="input-sm form-control" id="startDate" placeholder="起始日期"/>
                    <span class="col-form-label">至</span>
                    <input type="text" autocomplete="off" name="endDate" class="input-sm form-control" id="endDate" placeholder="到期日期"/>
                </div>
            </div>
        </form>
    </div>
    <th:block th:insert="~{include :: footer}" />
    <th:block th:insert="~{include :: datetimepicker-js}" />
    <script type="text/javascript">
        var prefix = "/coupon";

        function submitHandler() {
            if ($("#amount").val() <= 0) {
                $.modal.msgError('优惠金额必须大于0')
                return false;
            }

            if (parseInt($("#limitAmount").val()) < parseInt($("#amount").val())) {
                $.modal.msgError('使用限额必须大于优惠金额')
                return false;
            }
            var totalNum = $("#totalNum").val();
            var uType = $('input:radio[name="useType"]:checked').val();
            if (uType === 1) {//使用类型
                if (totalNum == '') {
                    $.modal.msgError('优惠卷可使用次数不能为空')
                    return false;
                }
                if (parseInt(totalNum) < 0) {
                    $.modal.msgError('优惠卷可使用次数不能为负数')
                    return false;
                }
            } else {
                if (totalNum === '' || parseInt(totalNum) <= 0) {
                    $.modal.msgError('生成优惠券编码数量必须大于0')
                    return false;
                }
                if (parseInt(totalNum) > 5000) {
                    $.modal.msgError('生成优惠券编码数量不能大于5000')
                    return false;
                }
            }

            //验证优惠券限制范围
            var range = $('input[name="range"]:checked').val();
            if (range === 2) {//单选专业
                if ($("#treeId").val() === '' || $("#treeId").val() === '0') {
                    $.modal.msgError('请选择优惠券限制专业')
                    return false;
                }
            } else if (range === 3) {//多选课程
                if ($("#courseIdHidden").val() === '') {
                    $.modal.msgError('请选择使用课程')
                    return false;
                }
            }

            //优惠券使用开始至截至日期
            if ($("#startDate").val() === '') {
                $.modal.msgError('请选择使用起始日期')
                return false;
            }

            if ($("#endDate").val() === '') {
                $.modal.msgError('请选择使用截止日期')
                return false;
            }

            var data = $("#form-coupon-add").serializeArray();
            $.operate.save(prefix + "/add.json", data);
        }

        $("#startDate").datetimepicker({
            format:'Y-m-d',
            formatDate:'Y-m-d',
            timepicker: false
        });

        $("#endDate").datetimepicker({
            format:'Y-m-d',
            formatDate:'Y-m-d',
            timepicker: false
        });

         //次数限制事件
        $("input[name='useType']").bind("click",function() {
            var checkValue = $('input:radio[name="useType"]:checked').val();
            if (checkValue === 2) {
                $("#totalNumTile").text("生成优惠编码数量：");
                $("#totalNumText").text("*不得大于5000");
            } else {
                $("#totalNumTile").text("优惠卷可使用次数：");
                $("#totalNumText").text("*输入可以使用次数，默认'0'为无限次使用");
            }
        });

        //适用范围事件
        $("input[name='range']").bind("click",function() {
            var rangeValue = $('input:radio[name="range"]:checked').val();
            switch (rangeValue) {
                case "1":
                    $("#categoryNameBtn").hide();
                    $("#limitCourse").hide();
                    $("#treeId").attr("name", "");
                    courseRemove()
                    break;
                case "2":
                    $("#categoryNameBtn").show();
                    $("#limitCourse").hide();
                    $("#treeId").attr("name", "categoryId");
                    courseRemove()
                    break;
                case "3":
                    $("#categoryNameBtn").hide();
                    $("#limitCourse").show();
                    $("#treeId").attr("name", "");
                    break;
                default:
            }
        });

        //添加课程
        function courseAdds(){
            $.modal.open('添加课程', "/course/select.html", '90%', '90%');
        }

        function courseList(courseArr) {
            if (courseArr.length > 0) {
                var courseId = [];
                var courseHTML = [];
                for (var i = 0; i < courseArr.length; i++) {
                    courseId.push(courseArr[i].courseId);
                    courseHTML.push("<p style='color: #2d93ca'><i class='fa fa-tasks'></i> " + courseArr[i].courseName + "</p>")
                }
                $("#courseList").empty().html(courseHTML.join(''));
                $("#courseIdHidden").val(courseId.join(','));
            }
        }

        function courseRemove() {
            $("#courseList").empty();
            $("#courseIdHidden").val('');
        }
    </script>
</body>
</html>